<template>
    <div class="sdy-category">
        <SdyHeader title="啥都有 ~ 分类页" back>asdasd</SdyHeader>
        <div class="slide" ref="slide">
            <!-- 通过给 inner 元素定位的方式, 可以实现出界回弹效果 -->
            <div class="inner" ref="inner" :style="{ top: posY + 'px' }" @touchstart="startHandler"
                @touchmove="moveHandler" @touchend="endHandler">
                <van-sidebar v-model="active" @change="sidebarChangeHandler">
                    <van-sidebar-item v-for="item in cateList" :title="item" />
                </van-sidebar>
            </div>
        </div>
        <div class="content">
            <div class="item" v-for="item in goodsList">
                <p class="title">{{ item.brand }}</p>
                <ul>
                    <li v-for="t in item.list">
                        <img :src="t.img1" alt="">
                        <span>名称</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import {
    categoryListApi,
    categoryBrandListApi,
    categorybrandprolistApi,
} from "@/api/goods";
// 导入相关ts接口
import type { MycategoryBrandGoodsItem } from "@/config/interface";
// 准备一个数据，用于触发侧边导航栏切换
const active = ref<number>(0);

// 回弹效果实现:
// + 绑定事件完成
// touchstart事件
//记录光标的初始位置
//记录元素的初始位置
// touchmove事件
//随着光标的移动，实时拿到光标的坐标位置
//用实时拿到的坐标位置 - 初始位置 = 本次光标移动的距离
//给'inner'元素进行赋值（元素本身的位置 + 本次移动的距离）

//准备变量，用于表示坐标位置
const startY = ref<number>(0);
const moveY = ref<number>(0);
const startTop = ref<number>(0);
const posY = ref<number>(0);
const inner = ref<HTMLDivElement | null>(null);
const slide = ref<HTMLDivElement | null>(null);

//准备一个右侧内容渲染的数组
// const goodsList = ref<>([])

//鼠标按下事件
const startHandler = (e: TouchEvent) => {
    // 记录光标初始位置
    startY.value = e.touches[0].clientY;
    // 记录元素初始位置
    startTop.value = (inner.value as HTMLElement).offsetTop;
    // console.log(startTop.value);
};
//鼠标移动事件
const moveHandler = (e: TouchEvent) => {
    // 随时拿到坐标位置
    moveY.value = e.touches[0].clientY - startY.value;
    // console.log(moveY.value);
    // proY可以当做inner元素的top方向定位
    posY.value = moveY.value + startTop.value;
    // 判断边界值（向上为正数，向下为负数）
    // 当posY>100时，顶部不允许再往下拖动
    if (posY.value >= 100) posY.value = 100;
    //当posY.value <= inner - slide - 100的高度，底部将不允许拖动
    if (
        posY.value <=
        -(inner.value as HTMLElement).offsetHeight -
        -(slide.value as HTMLElement).offsetHeight -
        100
    )
        posY.value =
            -(inner.value as HTMLElement).offsetHeight -
            -(slide.value as HTMLElement).offsetHeight -
            100;
};

//touchend事件，当鼠标抬起的时候，让数值回归0
const endHandler = () => {
    moveY.value = 0;
    //上方回弹实现，当posY>0时，顶部posY回到0的位置
    if (posY.value >= 0) posY.value = 0;
    //底部回弹实现，当posY.value <= inner - slide - 100的高度，顶部posY回到inner - slide的位置
    if (
        posY.value <=
        -(inner.value as HTMLElement).offsetHeight -
        -(slide.value as HTMLElement).offsetHeight -
        100
    )
        posY.value =
            -(inner.value as HTMLElement).offsetHeight -
            -(slide.value as HTMLElement).offsetHeight;
};

//准备一个右侧内容渲染的数组
const goodsList = ref<MycategoryBrandGoodsItem[]>([]);

//准备一个根据当前分类请求分类内所有相关数据的方法
const getGoodsList = async (cate: string) => {
    // console.log(`根据${cate}获取对应的数据`);

    // 1、根据当前cate请求回来品牌列表
    const brandList = await categoryBrandListApi(cate);
    // console.log(brandList);

    // 2、根据品牌列表内的所有内容，请求商品列表
    const list: Promise<any>[] = [];
    // 遍历每一个导航列表，将内容添加到数组中
    brandList.data.forEach((item: { brand: string }) => {
        list.push(categorybrandprolistApi({ category: cate, brand: item.brand }));
    });
    const goods = await Promise.all(list);
    // console.log(goods);

    // 3、组装数据
    const res: MycategoryBrandGoodsItem[] = [];
    brandList.data.forEach((item: { brand: string }, index: number) => {
        res.push({
            cate: cate,
            brand: item.brand,
            list: goods[index].data,
        });
    });
    // console.log(res);
    goodsList.value = res;
};

//准备一个数组，用于渲染页面
const cateList = ref<string[]>([]);
//sidebar导航切换
const sidebarChangeHandler = async (index: number) => {
    const cate = cateList.value[index];
    getGoodsList(cate);
};

// 挂载完毕的钩子
onMounted(async () => {
    const res = await categoryListApi();
    // console.log(res);
    cateList.value = res.data;

    getGoodsList(res.data[0]);
});
</script>
<style scoped lang="scss">
.sdy-category {
    display: flex;
    height: 100%;

    >.slide {
        height: 100%;
        position: relative;
        width: 80px;
        overflow-y: auto;

        &::-webkit-scrollbar {
            display: none;
        }

        >.inner {
            position: absolute;
            left: 0;
        }
    }

    >.content {
        flex: 1;
        overflow-y: auto;

        >.item {
            >.title {
                height: 30px;
                font-weight: 700px;
            }

            >ul {
                display: flex;
                box-sizing: border-box;
                padding: 10px;
                justify-content: space-evenly;

                >li {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    >img {
                        width: 50px;
                        height: 50px;
                        display: block;
                    }
                }
            }
        }
    }
}
</style>